
 <template>
  <div class="questions-randoms">
    <el-card>
      <div class="upnav">
        <div class="left">
          <span>关键字</span>
          <el-input
          ref="inputval"
            v-model="input"
            class="bianhao"
            style="width: 60%"
            placeholder="根据编号搜索"
          ></el-input>
        </div>
        <div class="right">
          <el-button @click="clearfn">清除</el-button>
          <el-button type="primary" @click="searchfn">搜索</el-button>
        </div>
      </div>
      <el-alert
        :title="title"
        type="info"
        :closable="false"
        style="margin-bottom: 15px"
        show-icon
      >
      </el-alert>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="编号" min-width="15%" align="center"> </el-table-column>
        <el-table-column  label="题型" align="center" min-width="11%">
          <template slot-scope="scope">
            {{ foquesTionType(scope.row.questionType) }}
            </template>
        </el-table-column>
        <el-table-column prop="questionIDs" align="center" label="题目编号"  min-width="15%">

           <template slot-scope="scope">
             <a style="color:royalblue" v-for="(item,index) in scope.row.questionIDs" :key="index" @click="titleNumber(item.id)">{{item.number}}</a><br>
           </template>
        </el-table-column>
        <el-table-column prop="addTime" align="center" label="录入时间"  min-width="15%">
        </el-table-column>
        <el-table-column prop="totalSeconds" align="center" label="答题时间（s）"  min-width="11%">
        </el-table-column>
        <el-table-column prop="accuracyRate" align="center" label="正确率（%）"  min-width="11%">
        </el-table-column>
        <el-table-column prop="userName" align="center" label="录入人"  min-width="11%">
        </el-table-column>
        <el-table-column label="操作" align="center"   min-width="11%">
           <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle plain @click="delfn(scope.row.id)"></el-button>
           </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <div class="page-right">
          <el-pagination
           background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="20"
            layout=" sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="题目预览"   :visible.sync="centerDialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="closeX"

  width="60%">
      <preview  ref="data" @closefn="closefn" :data="data"></preview>
    </el-dialog>
  </div>
</template>
<script>
// 引入 组件 方法
import preview from '../components/questions-previews'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { questionType as fquestionType } from '../../api/hmmm/constants'
// 枚举方法
const questionType = {}
fquestionType.forEach(item => {
  questionType[item.value] = item.label
})
// console.log('枚举信息', fquestionType, questionType)
export default {
  // 注册预览弹框组件
  components: {
    preview
  },
  data () {
    return {
      // 弹框是否出现
      centerDialogVisible: false,
      show: false,
      input: '', // input里的内容
      list: [], //  后台返回的列表数据
      title: '', // 动态提示信息
      count: 0, // 列表总数
      questionIDs: [], // 题目编号
      data: [], // 子组件的数据
      page: '' //  页数
    }
  },
  // 页面在created钩子是渲染页面
  created () {
    this.loadcreate()
  },
  methods: {
    // 渲染界面
    async loadcreate () {
      const rs = await randoms()
      // console.log(rs)
      this.list = rs.data.items
      // console.log(this.list)
      this.counts = rs.data.counts
      this.title = `数据一共${this.counts}条`
      this.count = this.counts
    },
    // 分页选择每页多少条
    async handleSizeChange (val) {
      this.pagesize = val
      // console.log(`每页 ${val} 条`)
      const rs = await randoms({ pagesize: val })
      // console.log(rs)
      this.list = rs.data.items
    },
    // 分页选择哪一页
    async handleCurrentChange (val) {
      this.page = val
      // console.log(`当前页: ${val}`)
      const rs = await randoms({ page: val, pagesize: this.pagesize })
      // console.log(rs)
      this.list = rs.data.items
    },
    // 搜索功能
    async searchfn () {
      // console.log(this.$refs.inputval.value)
      const id = this.$refs.inputval.value
      const rs = await randoms({ keyword: id })
      // console.log(rs)
      this.list = rs.data.items
      this.counts = rs.data.counts
      this.title = `数据一共${this.counts}条`
      this.count = this.counts
    },
    // 删除功能
    delfn (id) {
      // 弹出提示框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        // 删除后台数据
        await removeRandoms({ id: id })
        // 重新渲染页面
        this.loadcreate()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 枚举方法
    foquesTionType (label) {
      // const rs = fquestionType.questionType.find(item => item.value === value)
      // return rs.value
      return questionType[label]
    },
    // 清除input内容并重新渲染界面
    clearfn () {
      this.input = ''
      this.loadcreate()
    },
    // 父组件调用子组件的关闭方法 界面叉号
    closeX () {
      this.$refs.data.close()
    },
    // 点击出现预览框并渲染页面
    async titleNumber (id) {
      console.log(id)
      this.centerDialogVisible = true
      const rs = await detail({ id: id })
      console.log(rs)
      this.data = rs.data
    },
    // 关闭预览框并清除数据
    closefn () {
      this.centerDialogVisible = false
      this.data = ''
    }
  }
}
</script>

<style scoped lang="scss">
.questions-randoms {
  padding: 20px;
  .upnav {
    width: 100%;
    height: 40px;
    padding: 0 30px;
    margin-bottom: 20px;
    .left {
      color: #606266;
      float: left;
      span {
        display: inline-block;
        margin-right: 10px;
        font-weight: 700;
        font-size: 14px;
      }
    }
    .right {
      float: right;
    }
  }
  a{
     display: inline-block ;
     margin-bottom: 5px;

  }
  .page {
    width: 100%;
    padding: 20px;
    .page-right{
      float: right;
    }
  }
}
</style>
